<template>
  <div class="">
    <div class="hearder-search">
      <div class="toplineBox mb-10">
        <div class="toplineBox-left">
        </div>
        <p class="numberline toplineBox-right">总{{ page.total }}条</p>
      </div>
    </div>
    <!--本体列表，数据 -->
    <div class="table-body">
      <div class="table-body-box">
        <el-table
            ref="multipleTable"
            :data="arryList"
            :stripe="tableStripe"
            :border="tableBorder"
            tooltip-effect="dark"
            style="width: 100%"
            header-cell-class-name="table-text-c"
            cell-class-name="table-text-c">
          <el-table-column
              label="序号" width="100">
            <template slot-scope="scope">
              {{ scope.$index+1 }}
            </template>
          </el-table-column>
          <el-table-column
              label="被授人">
            <template slot-scope="scope">
              {{ scope.row.inviter ? scope.row.inviter.realname: '离职或已删除' }}
            </template>
          </el-table-column>
          <el-table-column
              label="授权日期"
              prop="create_time">
          </el-table-column>
          <el-table-column
              label="授权状态">
            <template slot-scope="scope">
              {{ !scope.row.status ? '禁用' : '启用' }}
            </template>
          </el-table-column>
          <el-table-column
              label="停用日期">
            <template slot-scope="scope">
              {{ !scope.row.status ? scope.row.update_time : '' }}
            </template>
          </el-table-column>
<!--          <el-table-column label="操作" width="220">-->
<!--            <template slot-scope="scope">-->
<!--              <el-button type="danger" size="small" @click="handleDetel(scope.$index)" v-if="scope.row.status">-->
<!--                停用-->
<!--              </el-button>-->
<!--              <el-button size="small" @click="handleDetel(scope.$index)" v-else>-->
<!--                启用-->
<!--              </el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
        </el-table>
      </div>
    </div>
    <!--工具条 分页-->
    <el-col :span="24" class="toolbar">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="page.total"
          :page-size="page.pageSize"
          @current-change="handleSizeChange">
      </el-pagination>
    </el-col>
  </div>
</template>

<script>
import {pagination, tableoption, dayCheck} from '@/utils/util.js'
import editvote from '@/components/dialog/editvote.vue'
import NewAuthorizedPerson from '@/components/dialog/NewAuthorizedPerson'
import api from '@/utils/api.js'

export default {
  components: {
    editvote,
    NewAuthorizedPerson
  },
  data () {
    return {
      tableStripe: true, // 是否斑马栏
      tableBorder: true, // 单元格右边边框
      arryList: [], // 数据列表
      handleSelection: [], // checked选中框
      // 设置table页面分页所需
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      authorizedvisible: false
    }
  },
  created () {
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn () {
      this.$fetch(this.api.schedule.myAuthorizationUser, {type: 1, user_id: 0}).then((response) => {
        if (response.code === 0) {
          this.arryList = response.list.data
          this.page.total = response.list.total
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 分页
    handleSizeChange (val) {
      this.page.pageindex = val
      this.InitFn()
    },
    handleDetel (index) {
      let title = '确认禁用授权 是否继续?'
      if (!this.arryList[index].status) {
        title = '确认开启授权 是否继续?'
      }
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(index)
      }).catch(() => {
      })
    },
    detelRespon (index) {
      let http_ = this.api.schedule.scheduleforbid // 禁用
      // scheduleresume
      if (!this.arryList[index].status) {
        http_ = this.api.schedule.scheduleresume // 启用
      }
      this.$post(http_, {id: this.arryList[index].id}).then((response) => {
        if (response.code === 0) {
          this.$message({
            type: 'success',
            message: response.msg
          })
          this.InitFn()
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    }
  },
  mounted () {
  }
}
</script>
